<template>
  <div class='center-nav'>
    <div class="ano-menu w1200">
      <img :src="logo" alt="logo" class="logo">
      <span class="title">{{title}}</span>
      <span v-for="(item, index) in menuData" :key="index" :class="{isActive:item.isActive,hover:true}" @click="changeMenu(item)">{{item.label}}</span>
    </div>
  </div>
</template>
<script>
import MixIns from '@/mix/mix.js'
export default {
  components: {},
  name: "",
  data() {
    return {
      logo:require('../../../assets/imgs/homepage/search_logo.png'),
      title:'买商品就到风水网',
      menuData:[
        {label:"首页",index:"/homepage",router:"/homepage",isActive:false},
        {label:"买家中心",index:"/center/buyer",router:"/center/buyer",isActive:false},
        {label:"卖家中心",index:"/center/seller",router:"/center/seller/shopManage/myshop",isActive:false},
        {label:"个人中心",index:"/center/mycenter",router:"/center/mycenter/baseinfo",isActive:false},
        {label:"实单求购",index:"/purchase",router:"/purchase",isActive:false},
      ]
    };
  },
  methods: {
    changeMenu(item){
      if(item.router)this.$router.push(item.router)
      this.menuData.find(val=>val.isActive).isActive=false
      this.$set(item,"isActive",true)
    },

    init(){
      this.menuData.find(val=>this.path.includes(val.index)).isActive=true
    }
  },
  created() {
    this.init()
  },
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.center-nav {
  height: 50px;
  line-height: 50px;
  background-color: #5b9cfe;

  .ano-menu{
    display: flex;
    color: #333;
    padding: 0 10px;

    img{
      height: 50px;
      margin-right: 10px;
    }

    .title{
      color: #fff;
      font-size: 16px;
      letter-spacing: 5px;
      margin-right: 20px;
    }

    span{
      display: inline-block;
      min-width: 100px;
      text-align: center;
    }
    span.isActive{
      color: #fff;
      background-color: #0033ff;
    }
  }
}
</style>